<template>
  <div class="staff-card">
    <!-- 咖啡师头像 -->
    <div class="staff-image">
      <img :src="staff.avatar_url || require('@/assets/images/default-avatar.jpg')" :alt="staff.name" />
    </div>

    <!-- 咖啡师信息 -->
    <div class="staff-info">
      <h3 class="staff-name">{{ staff.name }}</h3>
      <p class="staff-role">{{ staff.role || '咖啡师' }}</p>
      <div v-if="staff.certifications && staff.certifications.length" class="certifications">
        <strong>证书：</strong>
        <ul>
          <li v-for="(cert, index) in staff.certifications" :key="index">
            {{ cert.name }} ({{ cert.issue_year }})
          </li>
        </ul>
      </div>
      <div v-else class="no-cert">
        暂无证书信息
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  staff: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.staff-card {
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 300px;
  margin: 10px;
  background-color: #fff;
}

.staff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.staff-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.staff-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-info {
  padding: 15px;
}

.staff-name {
  font-size: 1.2rem;
  margin: 0 0 8px;
}

.staff-role {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.certifications ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.certifications li {
  font-size: 0.85rem;
  color: #555;
}
</style>